<template>
	<view>
		<view class="title">
				<text>群名称和群头像</text>
		</view>
		<view class="name">
			<text>群名称</text>
			<input v-model="name" placeholder="填写群名称(2-10个字)"/>
		</view>
		<view class="divider"></view>
		<view class="avatar-container">
			<text>群头像</text>
			<view class="images">
				<view>
					<image :class="upload!==''?'image-selected':'image'" @tap="selectAvatar()" :src="upload==''?'../../static/image/group/group-add.png':upload"></image>
				</view>                                                                           
			</view>
		</view>
		<view class="introduction">
			<textarea v-model="introduction" placeholder="简单介绍一下这个群吧"></textarea>
		</view>
		<view class="divider"></view>
		<view>
			<button @tap="operate()" class="btn" :disabled="name==''||name.length>10">{{groupId===-1?'立即创建':'提交修改'}}</button>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	import requestUrl from '@/api/url.js';
	import $store from '@/store/index.js';
	import userRequest from '@/api/user.js';
	export default{
		computed:{
			...mapGetters(['loginUserInfo'])
		},
		data(){
			return {
				groupId: -1,
				name:'',
				upload:'',
				introduction:''
			}
		},
		onUnload() {
			$store.state.editingGroupInfo = null
		},
		onLoad(options) {
			switch(options.action){
				case 'new':
					uni.setNavigationBarTitle({
						title:'新建群聊'
					})
				break;
				case 'edit':
					if($store.state.editingGroupInfo == null)
					{
						uni.redirectTo({
							url:'/pages/list/group-list'
						})
					}
					uni.setNavigationBarTitle({
						title:'编辑群聊'
					})
					//console.log($store.state.editingGroupInfo)
					this.groupId = $store.state.editingGroupInfo.id,
					this.name = $store.state.editingGroupInfo.name,
					this.introduction = $store.state.editingGroupInfo.introduction
				break;
				default:
				console.log('重新')
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		},
		methods:{
			selectAvatar: function() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						that.upload = res.tempFilePaths[0];
					}
				})
			},
			async createWithUpload(url){
				if(this.groupId!=-1){
					uni.showLoading({
						title: '修改...'
					})
					let param = {
					  id: this.groupId,
					  name:this.name,
					  introduction:this.introduction
					}
					if(url!='') param.avatar = requestUrl.getUrl() + url;
					//console.log(param)
					const { content: res } = await userRequest.updateGroup(param);
					//console.log(res)
					uni.hideLoading();
					uni.showToast({
						title:'修改成功！',
						icon:'success'
					})
				}else{
					//默认头像
					uni.showLoading({
						title: '注册中...'
					})
					let param = {
					  id: this.loginUserInfo.id,
					  name:this.name,
					  avatar: requestUrl.getUrl()+url,
					  introduction:this.introduction
					}
					//console.log(param)
					const { content: res } = await userRequest.createGroup(param);
					//console.log(res)
					uni.hideLoading();
					uni.showToast({
						title:'创建成功！',
						icon:'success'
					})
				}
				//重新获取一遍群信息
				$store.dispatch('getFriendList');
				setTimeout(function(){
					uni.navigateBack();
				},500)
			},
			
			async edit(){
				if(this.name.length>10||this.name.length<2){
					uni.showToast({
						title:'群名称2~10个字！',
						icon:'none'
					})
					return;
				}
				if(this.introduction.length>100){
					uni.showToast({
						title:'简介字也太多了吧！',
						icon:'none'
					})
					return;
				}
				if(this.upload!=''){
					uni.showLoading({
						title:'正在上传头像···',
					})
					let that = this;
					uni.uploadFile({
					    url: requestUrl.getUrl()+'ddchat/image/upload',
					    filePath: that.upload,
					    name: 'image',
					    formData: {
					        image: 'groupAvatar'
					    },
					    success: res => {
							uni.hideLoading()
					        //console.log(res)
							let data = JSON.parse(res.data)
							//console.log(data)
							that.createWithUpload(data.data.compressUrl)
					    },
					    fail: err => {
					        uni.hideLoading()
					        //console.log('请求失败_______________', err);
					    }
					});
				}else{
					this.createWithUpload('')
				}
			},
			
			operate(){
				if(this.groupId==-1){
					this.create()
				}else{
					this.edit()
				}
			},
			
			async create(){
				if(this.upload==''){
					uni.showToast({
						title:'请选择头像！',
						icon:'none'
					})
					return;
				}
				if(this.name.length>10||this.name.length<2){
					uni.showToast({
						title:'群名称2~10个字！',
						icon:'none'
					})
					return;
				}
				if(this.introduction.length>100){
					uni.showToast({
						title:'简介字也太多了吧！',
						icon:'none'
					})
					return;
				}
				uni.hideKeyboard();
				if(this.upload==''){
					uni.showToast({
						title:'请选择图片',
						icon:'none',
						duration:1000
					});
					return;
				}
				uni.showLoading({
					title:'正在上传头像···',
				})
				let that = this;
				uni.uploadFile({
				    url: requestUrl.getUrl()+'ddchat/image/upload',
				    filePath: that.upload,
				    name: 'image',
				    formData: {
				        image: 'groupAvatar'
				    },
				    success: res => {
						uni.hideLoading()
				        //console.log(res)
						let data = JSON.parse(res.data)
						//console.log(data)
						that.createWithUpload(data.data.compressUrl)
				    },
				    fail: err => {
				        uni.hideLoading()
				        console.log('请求失败_______________', err);
				    }
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.introduction{
		margin: 30rpx;
	}
	.introduction textarea{
		width: 100%;
		height: 200rpx;
	}
	.title{
		margin-top: 50rpx;
		margin-left: 30rpx;
	}
	.title text{
		font-size: 40rpx;
		font-weight: 900;
	}
	.name{
		display: flex;
		margin-top: 70rpx;
		margin-left: 30rpx;
	}
	.name text{
		font-size: 35rpx;
	}
	.name input{
		padding-top: 10rpx;
		margin-bottom: 0;
		margin-left: 20rpx;
	}
	.divider{
		margin-top: 20rpx;
		margin-left: 4%;
		margin-right: 6%;
		border-bottom: 3rpx solid gray;
	}
	.avatar-container{
		margin-top: 30rpx;
		margin-left: 30rpx;
	}
	.avatar-container text{
		font-size: 35rpx;
	}
	.images{
		margin-top: 30rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.image{
		margin-right: 35rpx;
		border-radius: 50%;
		width: 130rpx;
		height: 130rpx
	}
	.image-selected{
		margin-right: 35rpx;
		border-radius: 50%;
		width: 105rpx;
		height: 105rpx;
		border: #00aaff solid 15rpx;
	}
	.btn{
		margin-top: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		background-color: $theme-green-deep;
		color: white;
		font-size: large;
	}
</style>